<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JsBridge测试</title>
    <style>
        body { padding: 20px; font-family: Arial, sans-serif; }
        #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 100px; }
    </style>
</head>
<body>
    <h2>JsBridge通信测试</h2>
    <div id="result">通信结果将显示在这里...</div>
    <div id="buttons">调用Java方法的 div</div>

    <script>
        // 用于显示结果的辅助函数
        function showResult(text) {
            document.getElementById('result').innerHTML = text;
        }

        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }

         setupWebViewJavascriptBridge(function(bridge) {
            bridge.registerHandler('callH5Function', function(data, responseCallback) {
                showResult('Java 调用了 H5 的 callH5Function 方法, 参数为 = ' + data)
                var responseData = { 'Javascript Says':'Right back!' }
                responseCallback(responseData)
            })

            var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
            callbackButton.innerHTML = 'Fire testJavaCallback'
            callbackButton.onclick = function(e) {
                bridge.callHandler('callJavaFunction', {'foo': 'bar'}, function(response) {
                    log('JS got response', response)
                })
            }
        })
    </script>
</body>
</html>